<template>
  <div class="person">
    <h1>中国</h1>
    <h2 ref="title2">北京</h2>
    <h3>尚硅谷</h3>
    <button @click="showLog">点我输出h2这个元素</button>
  </div>
</template>

<script setup name="Person" lang="ts">
import { ref } from "vue";

//创建一个 title2 用于存储 ref 标记的内容,ref 可以解决撞名的问题
let title2 = ref();

/*
function showLog() {
  //JS语法，用document.getElementById(id)来渲染 id 所对应的网页元素
  console.log(document.getElementById("title2"));
  
  最好不要这么写，因为id是不能重复的，在一个项目中，哪怕是不同组件，比如Person.vue
  和App.vue撞id了，这样也不行，因为它们本质上是渲染在一个页面上的，网页会按照第一个
  调用id的命令渲染
  
}
*/
function showLog() {
  console.log(title2.value);
  //输出为 <h2 data-v-4cadc14e>北京</h2>,其中的 data-v-4cadc14e 是局部样式，去掉代码 scoped 就好了
}

//加了 scoped ，选样式时只能选中当前文件，给当前文件赋予这个样式，即使出现别的文件与当前文件同名了也没关系
</script>

<style scoped>
.person {
  background-color: #c2e0f6;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>